<template>
	<div class="imgGuanli w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<p><i class="line"></i>图片管理</p>
		</div>
		<div class="imgGuanliText">
			<div class="el-tabs-report">
				<a class="listOne" @click="createImg" v-if="imgGuanli.tpgl_add">添加图片/视频</a>
			</div>
			<el-table :data="tableData" border>
				<el-table-column label="序号" width="69">
					<template slot-scope="scope">{{ scope.row.sort}}</template>
				</el-table-column>
				<el-table-column prop="name" label="图片/视频名称"></el-table-column>
				<el-table-column label="缩略图" width="345">
					<template slot-scope="scope">
						<div class="imgGuanliImg">
							<img :src="scope.row.thumbnail" style="width: 100%;height: 100%;border: 0"/>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<el-switch class="switchStyle" v-model="scope.row.state" active-color="#44cef6" inactive-color="#999" active-text="开启" inactive-text="关闭" :active-value="1" :inactive-value="0" @change="changeSwitch(scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="handleEdit(scope.row)" v-if="imgGuanli.tpgl_edit">编辑</el-button>
						<el-button @click="handleDelete(scope.row)" v-if="imgGuanli.tpgl_del" class="red">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default {
		data() {
			return {
				sort:'',
				imgGuanli:'',
				tableData: []
			}
		},
		methods: {
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/imgManage/imgManageList",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data:{rootcompanyid:1},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data;
							for(var i = 0;i<this.tableData.length;i++){
								this.tableData[i].sort=i+1
							}
						}
					}
				});
			},
			handleEdit(row) {
				this.$ajax({
				 	url: this.$root.jifuUrl + "/mns/imgManage/imgManageDetails",
				 	headers:{'ContentType': 'application/json; charset=utf-8'},
				 	method: 'POST',
				 	data: {id:row.id},
				 	success: res => {
				 		if(res.data.code == 200) {
				 			this.$router.push({
				 				name: 'addImg',
				 				params: {
				 					type: 'edit'
				 				}
				 			})
				 			this.$root.imgGuanLiMsg = res.data.data;
				 		}
				 	}
				});
			},
			handleDelete(row){
				this.transitionRow = row;
				this.$rootFunction().rootDelete();
			},
			deleteSubmit() {
				this.$ajax({ 
					url: this.$root.jifuUrl + "/mns/imgManage/deleteImgManage",
					data:{id:this.transitionRow.id},
					method: 'DELETE',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					success: res => {
						if(res.data.code == 200) {
							this.$rootFunction().deleteResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				})
			},
			createImg(){
        		this.$router.push({
          			path: '/addImg'
        		})
			},
			changeSwitch(row) {
				if(row.state==0){
					this.$ajax({ 
						url: this.$root.jifuUrl + "/mns/imgManage/updateImgManageState",
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'PUT',
						data: {id:row.id,state:0},
						success: res => {
							if(res.data.code == 200) {
								console.log('当前用户状态为',row.state);
							}
						}
					});
				}else{
					this.$ajax({ 
						url: this.$root.jifuUrl + "/mns/imgManage/updateImgManageState",
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'PUT',
						data: {id:row.id,state:1},
						success: res => {
							if(res.data.code == 200) {
								console.log('当前用户状态为',row.state);
							}
						}
					});
				}
			}
		},
		components: {
			alert,
			deleteAlert
		},
		mounted: function() {
			this.getTableList();
			this.imgGuanli = this.$root.huasan.imgGuanli;
		}
	}
</script>

<style>
	.imgGuanli .imgGuanliImg{width: 268px;height: 153px;display: block;margin: 0 auto;}
	.imgGuanli .switchStyle span.el-switch__label--left{left: 7px;}
	.imgGuanli .switchStyle span.el-switch__label--right{left: -17px;}
</style>